@import "fontsize-and-color.scss";

.home-tools {
  position: fixed;
  bottom: 60px;
  right: 0;

  ul {
    display: flex;
    flex-direction: column;

    li {
      position: relative;
      background-color: #fff;
      border: 1px solid #f5f5f5;
      // border-left: 1px solid #f5f5f5;

      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 12px;
        position: relative;

        .icon {
          height: 24px;
          width: 24px;
          background-repeat: no-repeat;
          background-size: cover;
        }

        .icon1 {
          background-image: url(../image/右侧悬浮导航/1.png);
        }

        .icon2 {
          background-image: url(../image/右侧悬浮导航/2.png);
        }

        .icon3 {
          background-image: url(../image/右侧悬浮导航/3.png);
        }

        .icon4 {
          background-image: url(../image/右侧悬浮导航/4.png);
        }

        .icon5 {
          background-image: url(../image/右侧悬浮导航/5.png);
        }

        .icon6 {
          background-image: url(../image/右侧悬浮导航/6.png);
        }

        p {
          margin-top: 8px;
          @include font-normal;
          color: #999;
          text-align: center;
        }

        &:hover p {
          color: $mi-theme-color;
        }

        &:hover .scan-qr {
          width: 140px;
          height: 184px;

        }
      }

      &:first-child>a:hover .icon1 {
        background-image: url(../image/右侧悬浮导航/1-hover.png);
      }

      &:nth-child(2)>a:hover .icon2 {
        background-image: url(../image/右侧悬浮导航/2-hover.png);
      }

      &:nth-child(3)>a:hover .icon3 {
        background-image: url(../image/右侧悬浮导航/3-hover.png);
      }

      &:nth-child(4)>a:hover .icon4 {
        background-image: url(../image/右侧悬浮导航/4-hover.png);
      }

      &:nth-child(5)>a:hover .icon5 {
        background-image: url(../image/右侧悬浮导航/5-hover.png);
      }

      &:nth-child(6)>a:hover .icon6 {
        background-image: url(../image/右侧悬浮导航/6-hover.png);
      }

      &:nth-child(6) {
        margin-top: 16px;
        float: right;
        // 原网页并非使用粘性定位实现的最后一个元素的出现
        // 加上父元素使用绝对定位，是不能实现子元素粘性定位的
        // 如果将当前元素放到父元素外，当需要出现时又放回父元素，css是无法实现的
        // 这意味着需要操作dom的位置则必须要使用js，即使是has伪类也只能实现对dom的监听，不能直接移动dom位置
      }
    }
  }
}